<template>
  <div class="container-big">
    <div style="padding-bottom: 436px;" class="container">
      <banner />
      <!-- <div class="uncan-right" /> -->
      <!-- <div class="uncan-right-icon">
        <img src="https://gw.alicdn.com/tfs/TB1Gq7SHXzqK1RjSZFvXXcB7VXa-270-419.png">
      </div> -->
      <!-- :style="initHeight(formJson.length)" -->
      <div class="from-box">
        <div v-if="formJson.length!=0" class="from-tit cenLeft">
          <img src="https://gw.alicdn.com/tfs/TB1vpgTHcbpK1RjSZFyXXX_qFXa-200-200.png">
          收集的信息只会用来活动报名，认证使用，不做它用
        </div>
        <div v-if="formJson.length!=0" style="padding: 0px 16px;" class="from ">
          <div v-for="(item,index) of formJson " :key="index" style="padding: 0px" class="from-item">
            <inputText v-if="item.componentName=='stringTem'" :this-componen="item" :isReadonly="isReadonly" />
            <inputNumber v-if="item.componentName=='numberTem'" :this-componen="item" :isReadonly="isReadonly" />
            <moreSelect v-if="item.componentName=='moreSelectTem'" :this-componen="item" :isReadonly="isReadonly" />
          </div>
        </div>
      </div>
    </div>
    <div class="screen-fixed-box cenCen">
      <div v-if="formJson.length!=0&&!isReadonly" class="from-saveBtn cenCen" @click="checkFormJson()">
        保存
      </div>
    </div>
  </div>
</template>
<script>
// 表单组件部分
import inputText from "./assembly/inputText"; //input type为text 组件
import inputNumber from "./assembly/inputNumber"; //input type为number 组件
import moreSelect from "./assembly/moreSelect.vue"; //多选组件
import banner from "./../orderEnter/banner/banner";

import { getUrlParameter } from "./../../router/publicJs/getUrlParameter.js"; // 得到url 参数并且赋值

import {
  getFromField,
  getTicketInfo,
  addTicketPsnDoc,
  upDataTicketPsnDoc
} from "./../../api/infoEntry.js"; // 获取表单字段等接口
// import testJson from "./../infoEntry/testJson.json";
export default {
  components: {
    inputText,
    inputNumber,
    moreSelect,
    banner
  },
  data() {
    return {
      ifClick: true, //是否可以点击，防止重复点击
      isReadonly: false, //是否只读
      resGetTicketInfo: {}, //查询出来的信息
      id: "",
      isAdd: true, //是新增
      formJson: [] //表单json
    };
  },
  created() {
    this.initFun();
    this.isReadonly = false;
    this.id = this.$route.query.id || "";
    if (this.$route.query.isReadonly) {
      this.isReadonly = true;
    }
  },
  methods: {
    async initFun() {
      this.$store.state.loading = true;
      let resGetUrlParameter = await getUrlParameter(); //赋值获取url参数

      // 得到表单字段渲染页面
      // this.$store.state.infoEntry.fromField = testJson; //为了测试
      // this.addAreaCode(); //为了测试
      if (this.$store.state.infoEntry.fromField.length == 0) {
        let resGetFromField = await this.getFromField();
      }
      this.formJson = JSON.parse(
        JSON.stringify(this.$store.state.infoEntry.fromField)
      );

      this.$store.state.loading = false;

      // 判断是添加还是编辑
      if (this.id) {
        this.isAdd = false;
      }
      // 如果是编辑则需要先查询一下数据  得到当前人之前填写的数据信息
      if (!this.isAdd) {
        let resGetTicketInfo = await getTicketInfo(this.id);
        if (resGetTicketInfo.success) {
          this.resGetTicketInfo = resGetTicketInfo.result;
          // 如果查出来需要赋值到上面表单中
          let formJson = JSON.parse([this.resGetTicketInfo.formJson]);
          for (let i = 0; i < formJson.length; i++) {
            for (let j = 0; j < this.formJson.length; j++) {
              if (
                this.formJson[j].attribute.filedCode ==
                formJson[i].attribute.filedCode
              ) {
                this.$set(this.formJson[j], "attribute", formJson[i].attribute);
                this.$set(
                  this.formJson[j],
                  "componentName",
                  formJson[i].componentName
                );
                this.$forceUpdate();
              }
            }
          }
        }
      }
    },
    // 获取表单字段
    async getFromField() {
      let resData = await getFromField(
        this.$store.state.buyTicket.activityId,
        this.$store.state.buyTicket.ticketTypeId
      ); // 参数是活动id和票id
      if (resData.success) {
        this.$store.state.infoEntry.fromField = resData.result;
        this.addAreaCode();
      } else {
        // this.$toast(resData.errorMsg);
      }
    },
    // initHeight(length) {
    //   return `height:${80 * length}px`;
    // },
    // 关于手机号uTel增加区号字段
    addAreaCode() {
      let fromField = this.$store.state.infoEntry.fromField;
      for (let i = 0; i < fromField.length; i++) {
        if (fromField[i].attribute.filedCode == "uTel") {
          fromField[i].attribute.areaCode = "86";
        }
      }
      this.$store.state.infoEntry.fromField = fromField;
    },
    // 检验表单信息是否符合要求
    async checkFormJson() {
      if (!this.ifClick) {
        return;
      }
      this.ifClick = false;
      setTimeout(() => {
        this.ifClick = true;
      }, 1500);
      //填写表单的集合数据及认证是否必填项为空
      let resData = await this.checkFromItem(this.formJson);

      // 如果是新增，并且超过了规定值
      if (
        this.isAdd &&
        this.$store.state.buyTicket.userTicketList.length >= 100
      ) {
        this.$toast("用票人信息最多可以添加100个");
        return;
      }

      if (resData) {
        this.$store.state.loading = true;
        let resAddData = "";
        if (!this.isAdd) {
          this.resGetTicketInfo.formJson = JSON.stringify(this.formJson);
          resAddData = await upDataTicketPsnDoc(this.resGetTicketInfo); //更新数据
        } else {
          resAddData = await addTicketPsnDoc(this.formJson); //添加数据
        }
        this.$store.state.loading = false;
        if (resAddData.success) {
          this.$toast("保存成功");
          this.$router.go(-1);
        }
        //  else {
        //   // this.$toast(resAddData.errorMsg);
        // }
      }
    },
    // 验证表格里面的每一项
    checkFromItem(formList) {
      let ifCheckAll = true; //是否检查完了全部(每一个必填项信息)
      for (let i = 0; i < formList.length; i++) {
        if (
          formList[i].attribute.ifCheck &&
          !formList[i].attribute.filedValue
        ) {
          ifCheckAll = false;
          this.$toast(
            `${
              formList[i].attribute.placeholder
                ? formList[i].attribute.placeholder
                : "请填写"
            }${formList[i].attribute.titName}`
          );
          break;
        } else if (
          //验证邮箱
          formList[i].attribute.ifCheck &&
          formList[i].attribute.filedValue &&
          formList[i].attribute.filedCode == "uEmail"
        ) {
          let regu = /@/;
          let re = new RegExp(regu);
          if (!re.test(formList[i].attribute.filedValue)) {
            ifCheckAll = false;
            this.$toast("请填写正确邮箱");
            break;
          }
        } else if (
          formList[i].attribute.ifCheck &&
          formList[i].attribute.filedValue &&
          formList[i].attribute.filedCode == "uTel" &&
          !/^\d+$/.test(formList[i].attribute.filedValue)
        ) {
          ifCheckAll = false;
          this.$toast("请填写正确的手机号码");
          break;
        } else if (
          formList[i].attribute.ifCheck &&
          formList[i].attribute.filedValue &&
          formList[i].attribute.filedCode == "uTel" &&
          formList[i].attribute.areaCode == "86" &&
          formList[i].attribute.filedValue.length != 11
        ) {
          ifCheckAll = false;
          this.$toast("请填写正确的手机号码");
          break;
        }
      }
      return new Promise((resolve, reject) => {
        resolve(ifCheckAll);
      });
    }
  }
};
</script>

<style >
/* .uncan-right-icon {
  width: 270px;
  height: auto;
  position: absolute;
  right: 0px;
  top: -26px;
}
.uncan-right-icon > img {
  width: 100%;
  height: auto;
} */

.from-saveBtn {
  /* position: absolute;
  left: 0px;
  bottom: 0px; */
  width: 100%;
  height: 110px;
  background-image: linear-gradient(-116deg, #1debac 0%, #1e71f4 100%);
  /* font-family: PingFangSC-Regular; */
  font-size: 36px;
  color: #eeeeee;
  text-align: center;
  cursor: pointer;
}
.from-saveBtn:active {
  opacity: 0.8;
}
.from-box {
  width: 100%;
  height: auto;
  padding: 0px 5%;
  margin-top: 16px;
  z-index: 2;
}
.from-tit {
  width: 100%;
  height: auto;
  text-align: left;
  /* font-family: PingFangSC-Regular; */
  font-size: 22px;
  color: #b9b9bb;
}
.from-tit > img {
  width: 26px;
  height: auto;
  margin-right: 6px;
}
.from {
  width: 100%;
  height: auto;
  min-height: 160px;
  background: rgba(0, 0, 0, 0.4);
  /* border: 1px solid rgba(93, 93, 93, 0.2); */
  /* border: 1px solid #38383b; */
  padding: 0px 0px;
  margin-top: 16px;
  /* position: absolute;
  left: 5%;
  top: 328px; */
}
.from-item {
  width: 100%;
  height: auto;
}
.from > div:last-of-type > div {
  border-bottom: none;
}
/* 组件input样式 */
.from-input-box {
  width: 100%;
  height: auto;
  min-height: 100px;
  position: relative;
  border-bottom: 1px solid rgba(151, 151, 151, 0.2);
  padding: 6px 1px;
}
.from-input-tit {
  width: auto;
  max-width: 146px;
  height: auto;
  min-height: 100px;
  /* font-family: PingFangSC-Regular; */
  font-size: 28px;
  color: #ffffff;
  text-align: left;
  padding: 1px 0px 0px 0px;
  position: relative;
}
.select-phone {
  position: absolute;
  right: -66px;
  top: 0px;
  width: auto;
  min-width: 66px;
  height: 100%;
  cursor: pointer;
  z-index: 3;
}
.from-input-tit-check {
  color: #0ce4a2;
  margin-right: 1px;
}
.checkNot {
  opacity: 0;
}
.from-input {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding-left: 156px;
  padding-right: 46px;
  /* font-family: PingFangSC-Regular; */
  font-size: 28px;
  color: #fff;
  text-align: left;
}
.from-input-right-icon {
  position: absolute;
  right: 0px;
  top: 0px;
  width: auto;
  height: 100%;
}
.from-input-right-icon > img {
  width: 36px;
  height: auto;
}
.haveSelectPhone {
  padding-left: 236px;
}
.select-phone > img {
  width: 30px;
}
.from-input {
  text-align: left;
}
</style>
